import React, { useState } from 'react';
import { Checkbox, Input } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { PREFIX } from '../utils/consts';

interface ISearchBar {
  defaultChecked?: boolean;
  defaultValue?: string;
  loading?: boolean;
  placeholder?: string;
  checkLabel: string;
  onSearch: (value: string, checked: boolean) => void;
  onChange?: (value: string) => void;
}

const SearchBar: React.FC<ISearchBar> = (props) => {
  const {
    defaultChecked = false,
    defaultValue = '',
    onSearch,
    onChange,
    placeholder,
    checkLabel,
  } = props;
  const [checked, setChecked] = useState(defaultChecked);
  const [value, setValue] = useState(defaultValue);
  const onCheckChange = (e: any) => {
    setChecked(e.target.checked);
    onSearch(value, e.target.checked);
  };

  const handleChange = (e) => {
    setValue(e.target.value);
    onChange?.(e.target.value);
  };

  const onSubmit = () => {
    onSearch(value, checked);
  };

  return (
    <div className={`${PREFIX}-searchBar`}>
      <Input
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        style={{ marginRight: 20, width: 260 }}
        suffix={
          <InbizIcon
            type="icon-ic-sousuo"
            style={{ fontSize: '15px', color: '#d9d9d9' }}
            onClick={onSubmit}
          />
        }
        onPressEnter={onSubmit}
      />
      <Checkbox
        className={`${PREFIX}-searchCheck`}
        checked={checked}
        onChange={onCheckChange}
      >
        {checkLabel}
      </Checkbox>
    </div>
  );
};

export default SearchBar;
